<template>
	<view class="login">
		<view class="login-put">
			<view>
				<image class="logopng" mode="widthFix" src="/static/images/logo.jpg"></image>
			</view>
			<view class="username">
				<view class="icon">
					<image src="/static/images/zh.png"></image>
				</view>
				<u-input type="text" v-model="username" placeholder="请输入账号" :clearable="false"/>
			</view>
			<view class="password">
				<view class="icon">
					<image src="/static/images/mima.png"></image>
				</view>
				<xt-input type="password" v-model="password" placeholder="请输入密码" :clearable="false" />
			</view>
			<view class="login-button"  @click="login">登录</view>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
	
</template>

<script>
	export default{
		data(){
			return {
				username:"",
				password:""
			}
		},
		methods:{
			login(){
				let params = {
					username:this.username,
					password:this.password
				}
				this.$xt.api.login(params).then(res=>{
					uni.setStorageSync('role',res.data.role);
					uni.setStorageSync('token',res.data.token);
					uni.setStorageSync("userName",res.data.user.userName)
					uni.setStorageSync("roleName",res.data.user.roles[0].roleName)
					this.$refs.uToast.show({
						message:res.msg,
						type:"success"
					})
					this.$u.route({
						url:"pages/home/index",
						type:"switchTab",
					})
				}).catch(res=>{
					this.$refs.uToast.show({
						message:res.msg,
						type:"error"
					})
				})
				// if(this.username == "admin" && this.password == "123456"){
				// 	uni.setStorageSync("role","1")
				// 	this.$u.route({
				// 		url:"pages/home/index",
				// 		type:"switchTab",
				// 	})
				// }else if(this.username == "ceshi" && this.password == "123456"){
				// 	uni.setStorageSync("role","2")
				// 	this.$u.route({
				// 		url:"pages/home/index",
				// 		type:"switchTab",
				// 	})
				// }
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.login{
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100vh;
		 
		background-color: #F0FDFF;
	}
	.login-put{
		margin-left: 55rpx;
	}
	.logopng{
		width: 640rpx;
		margin-bottom: 50rpx;
	}
	.username,
	.password {
		width: 640rpx;
		height: 80rpx;
		border-radius: 6rpx;
		background-color: #FFFFFF;
		margin-bottom: 40rpx;
		padding-left: 100rpx;
		box-sizing: border-box;
		position: relative;
		border-radius: 8rpx;
		overflow: hidden;
	}
	
	.password {
		padding-right: 24rpx;
	}
	.icon {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.icon:after {
		content: '';
		height: 50rpx;
		width: 1px;
		transform: scaleX(0.5);
		position: absolute;
		right: 0;
		top: 15rpx;
		background-color: #f2f3f3;
	}
	
	.icon>image {
		width: 36rpx;
		height: 36rpx;
	}
	.login-button{
		text-align: center;
		background-color:#00aa00;
		color:#fff;
		border-radius: 15rpx;
		padding: 10rpx 24rpx;
		margin-top: 50rpx;
		width: 640rpx;
	}
</style>